Puukujuline vaade: hierarhiliste andmete navigeerimise ligipääsetavus

Puukujulised vaated on olulised kasutajaliidese komponendid hierarhiliste andmete kuvamiseks. Need võimaldavad kasutajatel navigeerida keerulistes struktuurides, nagu failisüsteemid, organisatsiooni skeemid või veebilehe menüüd, intuitiivsel viisil. Halvasti teostatud puukujuline vaade võib aga luua olulisi ligipääsetavuse takistusi, eriti puuetega kasutajatele, kes toetuvad abistavatele tehnoloogiatele nagu ekraanilugejad ja klaviatuurinavigatsioon. See artikkel pakub põhjalikku juhendit ligipääsetavate puukujuliste vaadete disainimiseks ja rakendamiseks, tagades positiivse kasutuskogemuse kõigile.

Puukujulise vaate struktuuri mõistmine

Puukujuline vaade esitab andmeid hierarhilises, laiendatavas/ahendatavas vormingus. Igal puu sõlmel võivad olla alamsõlmed, luues harusid ja alamharusid. Kõige ülemist sõlme nimetatakse juursõlmeks. Põhistruktuuri mõistmine on kriitilise tähtsusega enne ligipääsetavuse kaalutlustesse süvenemist.

Siin on ülevaade tavalistest puukujulise vaate elementidest:

• Puu (Tree): Üldine konteinerelement, mis hoiab kogu puu struktuuri.
• Puu element (Treeitem): Esindab ühte sõlme puus. See võib olla haru (laiendatav/ahendatav) või leht (ilma alamsõlmedeta).
• Grupp (Group): (Valikuline) Konteiner, mis visuaalselt grupeerib alamsõlmed emassõlme sees.
• Lüliti/Laiendamise ikoon (Toggler/Disclosure Icon): Visuaalne indikaator (nt pluss- või miinusmärk, nool), mis võimaldab kasutajatel haru laiendada või ahendada.
• Silt (Label): Iga puu elemendi jaoks kuvatav tekst.

ARIA rollide ja atribuutide tähtsus

Accessible Rich Internet Applications (ARIA) on atribuutide komplekt, mis lisab HTML-elementidele semantilise tähenduse, muutes need abistavatele tehnoloogiatele mõistetavaks. Puukujuliste vaadete ehitamisel on ARIA rollid ja atribuudid üliolulised puu struktuuri ja käitumise edastamiseks ekraanilugejatele.

Olulised ARIA rollid:

• role="tree": Rakendatakse konteinerelemendile, mis esindab kogu puud. See teavitab abistavaid tehnoloogiaid, et element sisaldab hierarhilist loendit.
• role="treeitem": Rakendatakse igale sõlmele puus. See identifitseerib iga sõlme puu elemendina.
• role="group": Rakendatakse konteinerelemendile, mis visuaalselt grupeerib alamsõlmed. Kuigi see pole alati vajalik, võib see parandada semantikat.

Peamised ARIA atribuudid:

• aria-expanded="true|false": Rakendatakse puu elementidele, millel on alamsõlmed. Näitab, kas haru on hetkel laiendatud (true) või ahendatud (false). Uuendage seda atribuuti dünaamiliselt JavaScripti abil, kui kasutaja sõlme laiendab või ahendab.
• aria-selected="true|false": Rakendatakse puu elementidele, et näidata, kas sõlm on hetkel valitud. Korraga peaks olema valitud ainult üks sõlm (välja arvatud juhul, kui teie rakendus nõuab mitmikvalikut, sel juhul kasutage aria-multiselectable="true" elemendil, millel on role="tree").
• aria-label="[sildi tekst]" või aria-labelledby="[sildi elemendi ID]": Annab kirjeldava sildi puule või üksikutele puu elementidele. Kasutage aria-label'it, kui silt ei ole visuaalselt nähtav; vastasel juhul kasutage aria-labelledby'd, et seostada puu element selle visuaalse sildiga.
• tabindex="0": Rakendatakse algselt fookuses olevale puu elemendile (tavaliselt esimesele). Kasutage tabindex="-1" kõigil teistel puu elementidel, kuni need fookusesse satuvad (nt klaviatuurinavigatsiooni kaudu). See tagab korrektse klaviatuurinavigatsiooni voo.

ARIA rakendamise näide:

Siin on põhiline näide, kuidas struktureerida puukujulist vaadet ARIA atribuutidega:

<ul role="tree" aria-label="Failisüsteem"> <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0"> <span>Juurkaust</span> <ul role="group"> <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1"> <span>Kaust 1</span> <ul role="group"> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Fail 1.txt</span></li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Fail 2.txt</span></li> </ul> </li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Kaust 2</span></li> </ul> </li> </ul>

Klaviatuurinavigatsioon

Klaviatuurinavigatsioon on ülimalt oluline kasutajatele, kes ei saa hiirt kasutada. Hästi disainitud puukujuline vaade peaks olema täielikult navigeeritav ainult klaviatuuri abil. Siin on standardsed klaviatuuri interaktsioonid:

• Nool üles: Liigutab fookuse eelmisele sõlmele puus.
• Nool alla: Liigutab fookuse järgmisele sõlmele puus.
• Nool vasakule:
  • Kui sõlm on laiendatud, ahendab see sõlme.
  • Kui sõlm on ahendatud või sellel pole alamsõlmi, liigutab fookuse sõlme emassõlmele.
• Nool paremale:
  • Kui sõlm on ahendatud, laiendab see sõlme.
  • Kui sõlm on laiendatud, liigutab fookuse esimesele alamsõlmele.
• Home: Liigutab fookuse esimesele sõlmele puus.
• End: Liigutab fookuse viimasele nähtavale sõlmele puus.
• Tühikuklahv või Enter: Valib fookuses oleva sõlme (kui valimine on toetatud).
• Tippimine (täht või number): Liigutab fookuse järgmisele sõlmele, mis algab tipitud tähemärgiga. Jätkab otsingut iga järgneva klahvivajutusega.
• Pluss (+): Laiendab hetkel fookuses olevat sõlme (samaväärne noolega paremale, kui sõlm on ahendatud).
• Miinus (-): Ahendab hetkel fookuses olevat sõlme (samaväärne noolega vasakule, kui sõlm on laiendatud).
• Tärn (*): Laiendab kõiki sõlmi praegusel tasemel (ei ole universaalselt toetatud, kuid sageli kasulik).

Klaviatuurinavigatsiooni JavaScripti implementatsioon:

Klaviatuurisündmuste käsitlemiseks ja fookuse vastavaks uuendamiseks on vaja JavaScripti. Siin on lihtsustatud näide:

const tree = document.querySelector('[role="tree"]'); const treeitems = document.querySelectorAll('[role="treeitem"]'); tree.addEventListener('keydown', (event) => { const focusedElement = document.activeElement; let nextElement; switch (event.key) { case 'ArrowUp': event.preventDefault(); // Väldib lehe kerimist // Loogika eelmise puu elemendi leidmiseks (nõuab DOM-i läbimist) // ... nextElement = findPreviousTreeitem(focusedElement); break; case 'ArrowDown': event.preventDefault(); // Loogika järgmise puu elemendi leidmiseks // ... nextElement = findNextTreeitem(focusedElement); break; case 'ArrowLeft': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'true') { // Ahendab sõlme focusedElement.setAttribute('aria-expanded', 'false'); } else { // Liigutab fookuse emassõlmele nextElement = findParentTreeitem(focusedElement); } break; case 'ArrowRight': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'false') { // Laiendab sõlme focusedElement.setAttribute('aria-expanded', 'true'); } else { // Liigutab fookuse esimesele alamsõlmele nextElement = findFirstChildTreeitem(focusedElement); } break; case 'Home': event.preventDefault(); nextElement = treeitems[0]; break; case 'End': event.preventDefault(); nextElement = treeitems[treeitems.length - 1]; break; case ' ': // Tühikuklahv case 'Enter': event.preventDefault(); // Loogika fookuses oleva sõlme valimiseks selectNode(focusedElement); break; default: // Käsitle tähemärkide tippimist navigeerimiseks sõlmedele, mis algavad selle tähemärgiga break; } if (nextElement) { focusedElement.setAttribute('tabindex', '-1'); nextElement.setAttribute('tabindex', '0'); nextElement.focus(); } });

Olulised kaalutlused klaviatuurinavigatsiooni implementeerimisel:

• Fookuse haldamine: Veenduge alati, et korraga oleks tabindex="0" ainult ühel puu elemendil. Fookuse liigutamisel uuendage vastavalt tabindex atribuute.
• DOM-i läbimine: Läbige DOM tõhusalt, et leida järgmised ja eelmised puu elemendid, emassõlmed ja alamsõlmed. Kaaluge abifunktsioonide kasutamist selle protsessi lihtsustamiseks.
• Sündmuse ennetamine: Kasutage event.preventDefault(), et takistada brauseril vaiketoimingute (nt kerimine) sooritamist nooleklahvide käsitlemisel.
• Tähemärkide tippimine: Rakendage loogika tähemärkide tippimise käsitlemiseks, võimaldades kasutajatel kiiresti navigeerida sõlmedele, mis algavad konkreetse tähemärgiga. Salvestage viimase klahvivajutuse aeg, et otsustada, millal otsingustring tühjendada.

Visuaalne disain ja ligipääsetavus

Visuaalne disain mängib puukujuliste vaadete kasutatavuses ja ligipääsetavuses olulist rolli. Siin on mõned juhised:

• Selge visuaalne hierarhia: Kasutage taanet ja visuaalseid vihjeid (nt erinevad ikoonid kaustade ja failide jaoks), et selgelt näidata puu hierarhiat.
• Piisav värvikontrastsus: Tagage piisav värvikontrastsus teksti ja tausta ning puuvaate erinevate elementide vahel. Kasutage kontrastsussuhete kontrollimiseks tööriistu nagu WebAIM Contrast Checker.
• Fookuse indikaator: Pakkuge selget ja nähtavat fookuse indikaatorit hetkel fookuses olevale puu elemendile. See on klaviatuurikasutajatele hädavajalik. Ärge toetuge ainult värvile; kaaluge piirjoone, raami või taustavärvi muudatuse kasutamist.
• Laiendamise/ahendamise indikaatorid: Kasutage selgeid ja arusaadavaid ikoone laiendamise/ahendamise indikaatoriteks (nt pluss/miinusmärgid, nooled). Veenduge, et neil ikoonidel oleks piisav kontrastsus ja et nad oleksid piisavalt suured, et neile oleks lihtne klõpsata.
• Vältige värvi kasutamist ainsa infoedastusvahendina: Ärge toetuge ainult värvile, et näidata puu elemendi olekut (nt valitud, laiendatud, viga). Pakkuge alternatiivseid visuaalseid vihjeid, nagu tekstisildid või ikoonid.

Ekraanilugeja kaalutlused

Ekraanilugejate kasutajad toetuvad ARIA atribuutidele ja klaviatuurinavigatsioonile, et mõista ja suhelda puukujuliste vaadetega. Siin on mõned peamised kaalutlused ekraanilugejate ligipääsetavuse osas:

• Kirjeldavad sildid: Kasutage aria-label'it või aria-labelledby'd, et pakkuda kirjeldavaid silte puule ja üksikutele puu elementidele. Need sildid peaksid olema lühikesed ja informatiivsed.
• Olekuteadanded: Veenduge, et olekumuutused (nt sõlme laiendamine/ahendamine, sõlme valimine) teatataks ekraanilugeja poolt korrektselt. See saavutatakse aria-expanded ja aria-selected atribuutide õige uuendamisega.
• Hierarhiateadanded: Ekraanilugejad peaksid teatama iga sõlme taseme hierarhias (nt "Tase 2, Kaust 1"). Enamik ekraanilugejaid teeb seda automaatselt, kui ARIA rollid on korrektselt rakendatud.
• Klaviatuurinavigatsiooni järjepidevus: Veenduge, et klaviatuurinavigatsioon on järjepidev ja ennustatav erinevates brauserites ja ekraanilugejates. Testige oma puukujulist vaadet mitme ekraanilugejaga (nt NVDA, JAWS, VoiceOver), et tuvastada ja lahendada kõik vastuolud.
• Progressiivne täiustamine: Kui JavaScript on keelatud, peaks puukujuline vaade olema endiselt ligipääsetav, kuigi piiratud kujul. Kaaluge semantilise HTML-i (nt pesastatud loendid) kasutamist, et tagada ligipääsetavuse baastase ka ilma JavaScriptita.

Brauseriülene ühilduvus

Ligipääsetavus peaks olema järjepidev erinevates brauserites ja operatsioonisüsteemides. Testige oma puukujulist vaadet põhjalikult järgmistes keskkondades:

• Lauaarvuti brauserid: Chrome, Firefox, Safari, Edge
• Mobiilibrauserid: Chrome (Android ja iOS), Safari (iOS)
• Operatsioonisüsteemid: Windows, macOS, Linux, Android, iOS
• Ekraanilugejad: NVDA (Windows), JAWS (Windows), VoiceOver (macOS ja iOS)

Kasutage brauseri arendaja tööriistu, et kontrollida ARIA atribuute ja klaviatuuri käitumist. Pöörake tähelepanu kõikidele vastuoludele või renderdamisprobleemidele.

Testimine ja valideerimine

Regulaarne testimine on teie puukujulise vaate ligipääsetavuse tagamiseks hädavajalik. Siin on mõned testimismeetodid:

• Manuaalne testimine: Kasutage ekraanilugejat ja klaviatuuri, et navigeerida puukujulises vaates ja veenduda, et kõik funktsioonid on ligipääsetavad.
• Automatiseeritud testimine: Kasutage ligipääsetavuse testimise tööriistu (nt axe DevTools, WAVE), et tuvastada potentsiaalseid ligipääsetavuse probleeme.
• Kasutajatestimine: Kaasake puuetega kasutajaid testimisprotsessi, et saada reaalset tagasisidet oma puukujulise vaate ligipääsetavuse kohta.
• WCAG vastavus: Püüdke täita Veebisisu juurdepääsetavussuuniste (WCAG) 2.1 AA taset. WCAG pakub rahvusvaheliselt tunnustatud suuniste kogumit veebisisu ligipääsetavamaks muutmiseks.

Ligipääsetavate puukujuliste vaadete parimad tavad

Siin on mõned parimad tavad, mida järgida ligipääsetavate puukujuliste vaadete disainimisel ja rakendamisel:

• Alustage semantilisest HTML-ist: Kasutage semantilisi HTML-elemente (nt <ul>, <li>), et luua puukujulise vaate põhistruktuur.
• Rakendage ARIA rolle ja atribuute: Kasutage ARIA rolle ja atribuute, et lisada semantiline tähendus ja pakkuda teavet abistavatele tehnoloogiatele.
• Rakendage robustne klaviatuurinavigatsioon: Veenduge, et puukujuline vaade on täielikult navigeeritav ainult klaviatuuri abil.
• Pakkuge selgeid visuaalseid vihjeid: Kasutage visuaalset disaini, et selgelt näidata puukujulise vaate hierarhiat, olekut ja fookust.
• Testige ekraanilugejatega: Testige puukujulist vaadet mitme ekraanilugejaga, et veenduda selle ligipääsetavuses ekraanilugejate kasutajatele.
• Valideerige WCAG vastavust: Valideerige puukujulist vaadet WCAG suuniste alusel, et tagada selle vastavus ligipääsetavuse standarditele.
• Dokumenteerige oma kood: Dokumenteerige oma kood selgelt, selgitades iga ARIA atribuudi ja klaviatuurisündmuse käsitleja eesmärki.
• Kasutage teeki või raamistikku (ettevaatlikult): Kaaluge eelnevalt ehitatud puukujulise vaate komponendi kasutamist mainekast kasutajaliidese teegist või raamistikust. Siiski vaadake hoolikalt üle komponendi ligipääsetavuse funktsioonid ja veenduge, et see vastab teie nõuetele. Testige alati põhjalikult!

Täpsemad kaalutlused

• Laadimise edasilükkamine (Lazy Loading): Väga suurte puude puhul rakendage laadimise edasilükkamist, et laadida sõlmi alles siis, kui neid vaja on. See võib parandada jõudlust ja vähendada esialgset laadimisaega. Veenduge, et laadimise edasilükkamine on rakendatud ligipääsetaval viisil, pakkudes kasutajale asjakohast tagasisidet sõlmede laadimise ajal. Kasutage ARIA live-piirkondi laadimise oleku teatamiseks.
• Lohistamine (Drag and Drop): Kui teie puukujuline vaade toetab lohistamise funktsionaalsust, veenduge, et see on ligipääsetav ka klaviatuuri- ja ekraanilugejate kasutajatele. Pakkuge alternatiivseid klaviatuurikäsklusi sõlmede lohistamiseks.
• Kontekstimenüüd: Kui teie puukujuline vaade sisaldab kontekstimenüüsid, veenduge, et need on ligipääsetavad klaviatuuri- ja ekraanilugejate kasutajatele. Kasutage ARIA atribuute kontekstimenüü ja selle valikute identifitseerimiseks.
• Globaliseerimine ja lokaliseerimine: Kujundage oma puukujuline vaade nii, et seda oleks lihtne lokaliseerida erinevate keelte ja kultuuride jaoks. Arvestage erinevate tekstisuundade (nt paremalt vasakule) mõjuga visuaalsele paigutusele ja klaviatuurinavigatsioonile.

Kokkuvõte

Ligipääsetavate puukujuliste vaadete loomine nõuab hoolikat planeerimist ja rakendamist. Järgides selles artiklis toodud juhiseid, saate tagada, et teie puukujulised vaated on kasutatavad ja ligipääsetavad kõigile kasutajatele, sealhulgas puuetega inimestele. Pidage meeles, et ligipääsetavus ei ole ainult tehniline nõue; see on kaasava disaini aluspõhimõte.

Ligipääsetavust eelistades saate luua parema kasutuskogemuse kõigile, olenemata nende võimetest. Oma koodi regulaarne testimine ja valideerimine on oluline. Hoidke end kursis uusimate ligipääsetavuse standardite ja parimate tavadega, et luua tõeliselt kaasavaid kasutajaliideseid.